import { AppBar, Container, Grid, Link, Toolbar } from "@material-ui/core"
import { makeStyles, Theme } from "@material-ui/core/styles"
import { Link as GatsbyLink } from "gatsby"
import * as React from "react"

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    flexGrow: 1,
  },
  logoFocus: {},
  nav: {
    flex: 1,
  },
}))

function Header() {
  const classes = useStyles()
  return (<>
    <AppBar color="transparent" position="static" className={classes.root}>
      <Container>
        <Toolbar>
          <Grid justify="space-between" alignItems="center" container>
            <Link variant="h6" component={GatsbyLink} to="/">Mallfoundry</Link>
            <Grid className={classes.nav} container justify="flex-end" spacing={4}>
              <Grid item>
                <Link component={GatsbyLink} to="/">文档</Link>
              </Grid>
              <Grid item>
                <Link component={GatsbyLink} to="/">社区</Link>
              </Grid>
              <Grid item>
                <Link component={GatsbyLink} to="/">博客</Link>
              </Grid>
              <Grid item>
                <Link component={GatsbyLink} to="/">关于</Link>
              </Grid>
            </Grid>
          </Grid>
          {/*
        <Typography variant="h6" className={classes.menuButton}>
          <Link href="/">文档</Link>
        </Typography>
        <Typography variant="h6" className={classes.menuButton}>
          <Link href="/">论坛</Link>
        </Typography>
        <Typography variant="h6" className={classes.menuButton}>
          <Link href="/">博客</Link>
        </Typography>
        <Typography variant="h6" className={classes.menuButton}>
          <Link href="/">关于</Link>
        </Typography>
        <Typography variant="h6" className={classes.menuButton}>
          <Link href="/">联系我们</Link>
        </Typography>*/}
        </Toolbar>
      </Container>
    </AppBar>
  </>)
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header
